<template>
    <a-modal 
    class="my-modal" 
    v-model:visible="modal_show" 
    title="影像配对查看" 
    @ok="modelok" 
    width="1500px" 
    :maskClosable="false" 
    :centered="true"
    cancelText= "取消"
    okText= "确定"
    :destroyOnClose="true"
    >
        <div class="body-content">
            <a-row>
                <a-tabs v-model="avtive_key" :default-active-key="defaultactivekey" @change="tabs_change">
                    <a-tab-pane :key="1">
                        <template #tab>
                            <span>
                                <a-badge status="success"></a-badge>
                                配对匹配 {{ matchs_table.length }}
                            </span>
                        </template>
                    </a-tab-pane>
                    <a-tab-pane :key="2">
                        <template #tab>
                            <span>
                                <a-badge status="warning"></a-badge>
                                未有效匹配 {{ tifs_not_matchs.length }}
                            </span>
                        </template>
                    </a-tab-pane>
                    <a-tab-pane :key="3">
                        <template #tab>
                            <span>
                                <a-badge status="error"></a-badge>
                                检查错误 {{ tifs_array_errors.length }}
                                <a-tooltip  placement="right">
                                    <template #title>检查错误的数据项不会纳入执行!</template>
                                    <exclamation-circle-outlined style="color: red;"/>
                                </a-tooltip>
                            </span>
                        </template>
                    </a-tab-pane>
                </a-tabs>
            </a-row>
            <a-row style="margin-top: 10px" v-show="avtive_key == 1">
                <a-table 
                :data-source="matchs_table" 
                :columns="matchs_columns" 
                :class="['task-table', 'image-check']" 
                size="small" 
                :showHeader="true" 
                tableLayout="fixed" 
                bordered 
                :pagination="matchs_pagination">
                    <template #expandedRowRender="{ record }">
                        <a-table  
                        :columns="matchs_innerColumns" 
                        :data-source="record.matchs" 
                        :pagination="false" 
                        :class="['inner-table']">
                        <span slot="size" slot-scope="record, text">{{ get_size(record) }} </span>
                        </a-table>
                    </template>
                </a-table>
            </a-row>
            <a-row style="margin-top: 10px" v-show="avtive_key == 2">
                <a-table 
                :data-source="tifs_not_matchs" 
                :columns="tifs_not_matchs_Columns" 
                :class="['task-table']" 
                size="small" 
                :showHeader="true" 
                tableLayout="fixed" 
                bordered 
                :pagination="tifs_not_matchs_pagination">
                    <template #expandedRowRender="{ record }">
                        <a-layout-content style="margin: 10px;">
                            <a-row>
                                <a-descriptions title="信息" bordered>
                                    <a-descriptions-item label="tif" :span="3">
                                        {{ record.tif }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="rpc" :span="3">
                                        {{ record.rpc }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="type" :span="3">
                                        {{ record.type }}
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-row>
                        </a-layout-content>
                    </template>
                </a-table>
            </a-row>
            <a-row style="margin-top: 10px" v-show="avtive_key == 3">
                <a-table
                 :data-source="tifs_array_errors" 
                 :columns="tifs_errors_Columns" 
                 :class="['task-table']" 
                 size="small" 
                 :showHeader="true" 
                 tableLayout="fixed"
                  bordered 
                  :pagination="tifs_errors_pagination">
                    <template #expandedRowRender="{ record }">
                        <a-layout-content style="margin: 10px;">
                            <a-row>
                                <a-descriptions title="信息" bordered>
                                    <a-descriptions-item label="tif" :span="3">
                                        {{ record.tif }}
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-row>
                        </a-layout-content>
                    </template>
                </a-table>
            </a-row>
        </div>
    </a-modal>
</template>
<script>
export default {
    data() {
        return {
            modal_show: false,
            defaultactivekey:1,
            avtive_key: 1,
            matchs_table: [],
            matchs_columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 355,
                    align: 'center',
                },
                {
                    title: '卫星类型',
                    dataIndex: 'satellite_type',
                    width: 40,
                    align: 'center',
                },
                {
                    title: '相机类型',
                    dataIndex: 'camera',
                    width: 40,
                    align: 'center',
                },
                {
                    title: '分辨率',
                    width: 50,
                    dataIndex: 'resolution',
                    align: 'center',
                },
            ],
            matchs_innerColumns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 325,
                    align: 'center',
                },
                {
                    title: '卫星类型',
                    dataIndex: 'SatelliteID',
                    width: 40,
                    align: 'center',
                },
                {
                    title: '传感器类型',
                    dataIndex: 'sensor',
                    width: 50,
                    align: 'center',
                },
                {
                    title: '计算分辨率',
                    width: 50,
                    dataIndex: 'resolution',
                    align: 'center',
                },
            ],
            matchs_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },
            matchs_inner_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },
            tifs_not_matchs: [],
            tifs_not_matchs_Columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 355,
                    align: 'center',
                },
                {
                    title: '相机类型',
                    dataIndex: 'camera',
                    width: 45,
                    align: 'center',
                },
                {
                    title: '传感器',
                    dataIndex: 'sensor',
                    width: 45,
                    align: 'center',
                },
                {
                    title: '传感器类型',
                    dataIndex: 'sensor_type',
                    width: 45,
                    align: 'center',
                },
                {
                    title: '分辨率',
                    dataIndex: 'resolution',
                    width: 45,
                    align: 'center',
                },
            ],
            tifs_not_matchs_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },
            tifs_array_errors: [],
            tifs_errors_Columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 255,
                    align: 'center',
                },
                {
                    title: '卫星类型',
                    dataIndex: 'SatelliteID',
                    width: 55,
                    align: 'center',
                },
                {
                    title: '错误信息',
                    dataIndex: 'message',
                    width: 220,
                    align: 'center',
                    ellipsis: true,
                },
            ],
            tifs_errors_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },

            tifs_checked: {},
            tifs_checked_ys:{},
            use_not_match:true,

            //mitt
            mitt_input_dom_dem_ckeck_modal_id:"",
            mitt_input_dom_dem_ckeck_modal_back_id:"",
        };
    },
    mounted() {
        this.defaultactivekey = 1;
        this.mitt_input_dom_dem_ckeck_modal_id=this.$mitt.on('input_dom_dem_ckeck_modal', (uid,data_obejct) => {
            this.mitt_input_dom_dem_ckeck_modal_back_id=uid
            this.avtive_key = 1;
            this.modal_show = true;
            this.tifs_checked = data_obejct.data;
            this.tifs_checked_ys=JSON.parse(JSON.stringify(this.tifs_checked))
            this.matchs_table = [];
            this.tifs_not_matchs = [];
            this.tifs_array_errors = []
            if(data_obejct.use_not_match===false){
                this.use_not_match=false
            }
            this.split_data();
        });
    },
    beforeUnmount() {
        this.$mitt.off('input_dom_dem_ckeck_modal',this.mitt_input_dom_dem_ckeck_modal_id);
    },
    methods: {
        modelok() {
            const that = this;
            if (this.matchs_table.length == 0 && this.tifs_not_matchs.length == 0) {
                this.$confirm({
                    title: `当前输入影像有效配对匹配、未完全配对为0个,请重新选择原始影像目录`,
                    onOk() {
                        that.modal_show = false;
                    },
                    onCancel() {},
                    cancelText: "取消",
                    okText: "重新选择",
                    class: 'test',
                });
            } 
            // else if (this.tifs_array_errors.length > 0) {
            //     this.$confirm({
            //         title: `当前输入影像有错误数据${this.tifs_array_errors.length}个,是否忽略错误继续执行?`,
            //         onOk() {
            //             that.modelok2();
            //         },
            //         cancelText:"取消",
            //         okText: "忽略错误并执行",
            //         onCancel() {},
            //         class: 'test',
            //     });
            // } 
            else {
                this.modelok2();
            }
        },
        modelok2() {
            const that = this;
            if(this.use_not_match){
                if (this.tifs_not_matchs.length > 0) {
                    this.$confirm({
                        title: `当前输入影像未完全配对数据${this.tifs_not_matchs.length}个,是否纳入执行?`,
                        onOk() {
                            that.back_ok(true);
                        },
                        onCancel() {
                            that.back_ok(false);
                        },
                        cancelText: "不纳入执行",
                        okText: "纳入执行",
                        class: 'test',
                    });
                }
                else {
                    that.back_ok(false);
                }
            }
            else {
                that.back_ok(false);
            }
        },
        tabs_change(activeKey) {
            this.avtive_key = activeKey
        },
        split_data() {
            this.defaultactivekey =0
            for (let index = 0; index < this?.tifs_checked?.tifs_matchs?.length; index++) {
                let tifs_match_one = this?.tifs_checked?.tifs_matchs[index];
                let one_show = {
                    key: index,
                    matchs: [],
                };
                let key_add = 0;
                for (const [key, value] of Object.entries(tifs_match_one)) {
                    if (key == 'pan') {
                        one_show.name = value.name;
                        one_show.camera = value.SatelliteID;
                        one_show.resolution = value.resolution;
                        one_show.satellite_type = value.sensor_type;
                    }
                    value.key = key_add;
                    one_show.matchs.push(value);
                    key_add = key_add + 1;
                }
                this.matchs_table.push(one_show);
            }
            if(this.matchs_table.length){
                this.defaultactivekey = 1
            }
            this.tifs_not_matchs = []
            let not_match_count = 0
            for (let index = 0; index < this.tifs_checked.tifs_not_matchs.length; index++) {
                for (const [key, value] of Object.entries(this.tifs_checked.tifs_not_matchs[index])) {
                    value.key = not_match_count
                    this.tifs_not_matchs.push(value)
                    not_match_count = not_match_count + 1
                }
            }
            if (this.tifs_not_matchs.length && this.defaultactivekey == 0) {
                this.defaultactivekey = 2
            }
            this.tifs_array_errors =[]
            for (let index = 0; index < this.tifs_checked.tifs_errors.length; index++) {
                this.tifs_checked.tifs_errors[index].key = index;
                this.tifs_array_errors.push(this.tifs_checked.tifs_errors[index])
            }
            if (this.tifs_array_errors.length && this.defaultactivekey == 0) {
                this.defaultactivekey = 3
            }
            this.avtive_key= this.defaultactivekey
        },
        back_ok(do_or_not) {
            let all_tif_objects = this.tifs_checked_ys.tifs_matchs
            if(do_or_not){
                all_tif_objects= all_tif_objects.concat(this.tifs_checked_ys.tifs_not_matchs)
            }
            this.$mitt.oemit('input_dom_dem_ckeck_modal_back',{
                single: do_or_not,
                objects: all_tif_objects
            },this.mitt_input_dom_dem_ckeck_modal_back_id);
            this.modal_show = false;
        },
    },
};
</script>